<script setup lang="ts">
import type { ConsultType } from '@/enums';
import ConsultItem from './ConsultItem.vue'
import { ref } from 'vue';
import { getConsultOrderListAPI } from '@/apis/consult';
import type { ConsultOrderItem, ConsultOrderListParams } from '@/types/consult';

defineOptions({
    name: 'ConsultList'
})

// 接收父组件传的值
const props = defineProps<{
    type: ConsultType
}>()

const list = ref<ConsultOrderItem[]>([])
const loading = ref(false)
const finished = ref(false)

const params = ref<ConsultOrderListParams>({
    current: 1,
    pageSize: 5,
    type: props.type
})
const onLoad = async () => {
    const res = await getConsultOrderListAPI(params.value)
    // console.log(res.data.rows)
    list.value.push(...res.data.rows)
    // 页数加1
    params.value.current++
    // 关闭加载效果
    loading.value = false
    // 如果没有数据了就显示没有更多了
    if (params.value.current > res.data.pageTotal) {
        finished.value = true
    }
}

// 接收子组件的事件
const onDelete = (id: string) => {
    // 筛选掉要删除的元素
    list.value = list.value.filter((item) => item.id !== id)
    // 如果已经删除完了
    if (list.value.length === 0) onLoad()
}

</script>

<template>
    <div class="consult-list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <consult-item v-for="item in list" :key="item.id" :item="item" @on-delete="onDelete" />
        </van-list>

    </div>
</template>

<style lang="scss" scoped>
.consult-list {
    padding: 10px 15px;
}
</style>
